<script src="/aifish/common/check.pjax.js"></script>
<article>
    <div class="toc-affix" style="width: 120px; height: 150px;">
        <div class="ant-affix">
            <ul class="toc demos-anchor">
                <li title="介绍"><a href="#介绍">介绍</a></li>
                <li title="使用与安装"><a href="#使用与安装">使用与安装</a></li>
                <li title="基本语法"><a href="#基本语法">基本语法</a></li>
                <li title="Handlebar的表达式"><a href="#Handlebar的表达式">Handlebar的表达式</a></li>
                <li title="Handlebars的内置块表达式（Block helper）"><a href="#Handlebars的内置块表达式（Block helper）">Handlebars的内置块表达式（Block helper）</a></li>
                <li title="自定义helper"><a href="#自定义helper">自定义helper</a></li>
            </ul>
        </div>
    </div>
    <section class="markdown">
        <p>
            <a href="http://handlebarsjs.com/"><img src="/aifish/assets/img/handlebars.png" width="220"  alt="logo"></a>
        </p>
        <h2 id="介绍">
            <span>介绍</span>
            <a href="#介绍" class="anchor">#</a>
        </h2>
        <p>
            <b>Handlebars</b> 是 JavaScript 一个语义模板库，通过对view和data的分离来快速构建Web模板。它采用"Logic-less template"（无逻辑模版）的思路，在加载时被预编译，而不是到了客户端执行到代码时再去编译， 这样可以保证模板加载和运行的速度。Handlebars兼容Mustache，你可以在Handlebars中导入Mustache模板。
        </p>
        <h2 id="使用与安装"><span>使用与安装</span><a href="#使用与安装" class="anchor">#</a></h2>
        <p>Handlebars的安装非常简单，你只需要从Github下载最新版本，你也可访问下面网址获取最新信息：<a href="http://handlebarsjs.com/">http://handlebarsjs.com</a>。 目前handlebars.js已经被许多项目广泛使用了，handlebars是一个纯JS库，因此你可以像使用其他JS脚本一样用script标签来包含handlebars.js
        </p>
<pre>
    <code class="lang-html">    &lt;script type="text/javascript" src=".js/handlebars.js"&gt;&lt;/script&gt;</code>
</pre>
        <h2 id="基本语法"><span>基本语法</span><a href="#基本语法" class="anchor">#</a></h2>
        <p>Handlebars expressions 是handlebars模板中最基本的单元，使用方法是加两个花括号<code>{{value}}</code>, handlebars模板会自动匹配相应的数值，对象甚至是函数。
            <br> 例如：
        </p>
        <pre><code class="lang-html">    &lt;div class="demo"&gt;  
        &lt;h1&gt;{{name}}&lt;/h1&gt;
        &lt;p&gt;{{content}}&lt;/p&gt;
    &lt;/div&gt;</code></pre>
        <p>你可以单独建立一个模板,ID（或者class）和type很重要，因为你要用他们来获取模板内容 例如：
        </p>
        <pre><code class="lang-html">   &lt;script id="tpl" type="text/x-handlebars-template"&gt;  
        &lt;div class="demo"&gt;  
            &lt;h1&gt;{{title}}&lt;/h1&gt;
            &lt;p&gt;{{content.title}}&lt;/p&gt;
        &lt;/div&gt;
    &lt;/script&gt;</code></pre>
        <p>handlebars会根据上下文来自动对表达式进行匹配，如果匹配项是个变量，则会输出变量的值，如果匹配项是个函数，则函数会被调用。
            <br> 如果没找到匹配项，则没有输出。表达式也支持点操作符，因此你可以使用
            <code>{{content.title}}</code>这样的形式来调用嵌套的值或者方法， handlebars会根据当前上下文输出content变量的title属性的值。
        </p>
        <p>在JavaScript中，使用<code>Handlebars.compile()</code>方法来预编译模板 例如：(这是一套规则)
        </p>
        <pre><code class="lang-javascript">    //用jquery获取模板
    var tpl   =  $("#tpl").html();
    //原生方法
    var source = document.getElementById('#tpl').innerHTML;
    //预编译模板
    var template = Handlebars.compile(source);
    //模拟json数据
    var context = { name: "zhaoshuai", content: "learn Handlebars"};
    //匹配json内容
    var html = template(context);
    //输入模板
    $(body).html(html);</code></pre>
        <h2 id="Handlebar的表达式"><span>Handlebar的Block表达式</span><a href="#Handlebar的表达式" class="anchor">#</a></h2>
        <p>有时候当你需要对某条表达式进行更深入的操作时，Blocks就派上用场了，在Handlebars中，你可以在表达式后面跟随一个#号来表示Blocks，然后通过<code>{{/表达式}}</code>来结束Blocks。 如果当前的表达式是一个数组，则Handlebars会“自动展开数组”，并将Blocks的上下文设为数组中的元素。 例如：
        </p>
        <pre><code class="lang-html">   &lt;ul&gt;  
    {{#programme}}
        &lt;li&gt;{{language}}&lt;/li&gt;
    {{/programme}}
    &lt;/ul&gt;</code></pre>
        <p>有以下json数据</p>
        <pre><code class="lang-json">   {
      programme: [
        {language: "JavaScript"},
        {language: "HTML"},
        {language: "CSS"}
      ]
    }</code></pre>
        <p>编译模板代码同上…… 上面的代码会自动匹配
            <code>programme</code>数据并展开数据，渲染DOM后就是这样的
        </p>
        <pre><code class="lang-html">   &lt;ul&gt;  
      &lt;li&gt;JavaScript&lt;/li&gt;
      &lt;li&gt;HTML&lt;/li&gt;
      &lt;li&gt;CSS&lt;/li&gt;
   &lt;/ul&gt;</code></pre>
        <h2 id="Handlebars的内置块表达式（Block helper）"><span>Handlebars的内置块表达式（Block helper）</span><a href="#Handlebars的内置块表达式（Block helper）" class="anchor">#</a></h2>
        <h3>1.each block helper</h3>
        <p>你可以使用内置的<code>{{#each}}</code> helper遍历列表块内容，用<code>this</code>来引用遍历的元素 例如：
        </p>
        <pre><code class="lang-html">   &lt;ul&gt;  
        {{#each name}}
            &lt;li&gt;{{this}}&lt;/li&gt;
        {{/each}}
   &lt;/ul&gt;</code></pre>
        <p>这里的<code>this</code>指的是数组里的每一项元素，和上面的Block很像，但原理是不一样的这里的name是数组，而内置的each就是为了遍历数组用的，更复杂的数据也同样适用。</p>
        <h3>2.if else block helper</h3>
        <p><code>{{#if}}</code>就你使用JavaScript一样，你可以指定条件渲染DOM，如果它的参数返回<code>false，undefined, null, "" 或者 [] (a "falsy" value)</code>, Handlebar将不会渲染DOM，如果存在
            <code>{{#else}}</code>则执行<code>{{#else}}</code>后面的渲染
            <br> 例如：
        </p>
        <pre><code class="lang-html">   {{#if list}}
    &lt;ul id="list"&gt;  
        {{#each list}}
            &lt;li&gt;{{this}}&lt;/li&gt;
        {{/each}}
    &lt;/ul&gt;  
    {{else}}
        &lt;p&gt;{{error}}&lt;/p&gt;
    {{/if}}</code></pre>
        <p>这里<code>{{#if}}</code>判断是否存在list数组，如果存在则遍历list，如果不存在输出错误信息</p>
        <h3>3.unless block helper</h3>
        <p><code>{{#unless}}</code>这个语法是反向的if语法也就是当判断的值为<code>false</code>时他会渲染DOM 例如：
        </p>
        <pre><code class="lang-html">   {{#unless data}}
    &lt;ul id="list"&gt;  
        {{#each list}}
            &lt;li&gt;{{this}}&lt;/li&gt;
        {{/each}}
    &lt;/ul&gt;  
    {{else}}
        &lt;p&gt;{{error}}&lt;/p&gt;
    {{/unless}}</code></pre>
        <h3>4.with block helper</h3>
        <p><code>{{#with}}</code>一般情况下，Handlebars模板会在编译的阶段的时候进行context传递和赋值。使用with的方法，我们可以将context转移到数据的一个section里面（如果你的数据包含section）。 这个方法在操作复杂的template时候非常有用。
        </p>
        <pre><code class="lang-html">   &lt;div class="entry"&gt;  
      &lt;h1&gt;{{title}}&lt;/h1&gt;
      {{#with author}}
      &lt;h2&gt;By {{firstName}} {{lastName}}&lt;/h2&gt;
      {{/with}}
   &lt;/div&gt;</code></pre>
        <h2 id="自定义helper"><span>自定义helper</span><a href="#自定义helper" class="anchor">#</a></h2>
        <p>Handlebars，可以从任何上下文可以访问在一个模板，你可以使用<code>Handlebars.registerHelper()</code>方法来注册一个helper。</p>
        <p>把下面一段"success helper"加载到你的JavaScript代码里,然后在模板文件里通过<code>{{success}}</code>或是<code>{{success someValue}}</code>对数据进行渲染处理从而得到"成功"或者"失败"</p>
        <pre><code class="lang-javascript">    Handlebars.registerHelper("success", function(value) {  
        if(value == 1) {
            return "成功";
        } else if(value == 2) {
            return "失败";
        }
    });</code></pre>
        </section>
</article>